<script setup>
import {BaseImgUrl, BaseURL} from "../../utils/lshttp";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";
import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {getBannerNavAPI} from "../../services";
import {toMiniAppRedPage, toPageUtils} from "../../utils/utils";

const commonInfoStore = useCommonInfoStore()
const emits = defineEmits(['toGFBWC'])
const dataList = ref([])
onLoad(async () => {
  const res = await getBannerNavAPI(5)
  dataList.value = res.result
  dataList.value.forEach((item) => {
    item.image = BaseURL + item.image
  })

  // #ifdef H5
  await commonInfoStore.initJSDKConfig()
  // #endif
})
// 监听跳转
const handleLaunch = () => {
  console.log('跳转');
}
// 监听错误
const handleError = () => {
  console.log('失败');
}
const toGFBWC = () => {
  emits('toGFBWC')
}
const toNewUser = () => {
  uni.navigateTo({
    url: "/pages/index/novice"
  })
}
const toELMRedBag = () => {
  const item = {
    original_id: commonInfoStore.reward.popup[1].original_id,
    appid: commonInfoStore.reward.popup[1].appid,
    path: commonInfoStore.reward.popup[1].path
  }
  toMiniAppRedPage(item)
}
const clickImg = (index) => {
  const item = dataList.value[index]
  toPageUtils(item)
}

</script>

<template>
  <view style="margin: 20rpx 26rpx;display: flex">
    <view class="left">
      <view @click="toNewUser" style="display: flex;align-items: center;margin-top: 6rpx">
        <image class="yiwen" :src="BaseImgUrl + '/guanfan/home/yiwen.png'" mode="widthFix"/>
        <text>新人如何使用领食</text>
      </view>
      <view class="bcbz" v-if="dataList.length>0">
        <u-swiper
            :list="dataList"
            :autoplay="true"
            indicator
            indicatorMode="line"
            radius="5"
            show-menu-by-longpress
            keyName="image"
            autoplay
            bgColor="#FFEBEB"
            previousMargin="0"
            nextMargin="0"
            @click="clickImg"
            circular width="100%" height="210rpx">
        </u-swiper>
      </view>
    </view>
    <view style="width: 16rpx;height: 300rpx;"></view>
    <view style="flex: 1;height: 300rpx;display: flex;flex-direction: column;overflow: hidden">
      <view style="width: 100%;flex: 1;position: relative" @click="toGFBWC">
        <image :src="BaseImgUrl + '/guanfan/home/mt_bg.png'" style="width: 100%;height: 100%"/>
        <view class="metian_contetn">
          <view class="title">美团官方霸王餐</view>
          <view style="margin-top: 20rpx">
            <text class="sub_title">超划算 官方秒返</text>
            <text class="go">GO></text>
          </view>
        </view>
      </view>
      <view style="width: 100%;height: 16rpx;"></view>
      <view style="width: 100%;flex: 1;position: relative">
        <!-- #ifdef APP-PLUS || MP-->
        <view style="width: 100%;height: 100%" @click="toELMRedBag">
          <image :src="BaseImgUrl + '/guanfan/home/elm_bg.png'" style="width: 100%;height: 100%"/>
          <view class="elm_contetn">
            <view class="title">饿了么福利</view>
            <view style="margin-top: 20rpx">
              <text class="sub_title">外卖补贴红包</text>
              <text class="go">GO></text>
            </view>
          </view>
        </view>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <view style="width: 100%;height: 100%">
          <image :src="BaseImgUrl + '/guanfan/home/elm_bg.png'" style="width: 100%;height: 100%"/>
          <view class="elm_contetn">
            <view class="title">饿了么福利</view>
            <view style="margin-top: 20rpx">
              <text class="sub_title">外卖补贴红包</text>
              <text class="go">GO></text>
            </view>
          </view>
          <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError"
                                :username="commonInfoStore.reward.popup[1].original_id"
                                :path="commonInfoStore.reward.popup[1].path"
                                style="position: absolute;z-index: 89;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #1db9ff;">
            <component :is="'script'" type='text/wxtag-template' style="display: block;">
              <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
            </component>
          </wx-open-launch-weapp>
        </view>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.left {
  width: 40%;
  font-size: 24rpx;
  padding: 16rpx;
  background: linear-gradient( 180deg, #FFEBEB 0%, #FFFFFF 100%);
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 2rpx solid #FFFFFF;

  .yiwen {
    width: 32rpx;
    height: 28rpx;
    margin-right: 10rpx;
  }

  .bcbz {
    width: 100%;
    margin-top: 20rpx;
  }
}

.title {
  font-size: 30rpx;
  font-weight: bold;
}

.sub_title {
  font-size: 24rpx;
  font-weight: bold;
  color: #000000;
}

.go {
  width: 60rpx;
  height: 32rpx;
  margin-left: 10rpx;
  line-height: 32rpx;
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  opacity: 1;
  font-size: 20rpx;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  display: inline-block;
}

.metian_contetn {
  position: absolute;
  top: 0;
  left: 20rpx;
  margin-top: 20rpx;
  z-index: 88;

  .title {
    color: #F58B00;
  }

  .go {
    background: #FDA026;
  }
}

.elm_contetn {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  z-index: 88;

  .title {
    color: #0092FE;
  }

  .go {
    background: #0191FA;
  }
}
</style>